<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理员列表</title>
    <link rel="stylesheet" href="../res/layui/css/layui.css">
    <style>
        #userInfoDialog {
            padding: 20px;
            width: 400px;
            display: none; /*隐藏层*/
        }

        #userInfoDialog p {
            padding: 10px 0;
        }
        
        .layui-table-cell {
            height: auto;
            white-space: normal;
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">管理员列表</div>
        <div class="layui-card-body">
            <div style="margin-bottom: 10px;">
                <button class="layui-btn layui-btn-normal" id="addAdminBtn">
                    <i class="layui-icon layui-icon-add-1"></i> 添加管理员
                </button>
            </div>
            <table id="adminlist" lay-filter="adminFilter"></table>
        </div>
    </div>
</div>

<!--用户信息对话框-->
<div id="userInfoDialog">
    <table class="layui-table">
        <tr>
            <td>用户名</td>
            <td><span id="username"></span></td>
        </tr>
        <tr>
            <td>手机号</td>
            <td><span id="phone"></span></td>
        </tr>
        <tr>
            <td>添加时间</td>
            <td><span id="addtime"></span></td>
        </tr>
        <tr>
            <td>状态</td>
            <td><span id="status"></span></td>
        </tr>
    </table>
</div>

<script src="../res/layui/layui.js"></script>
<script>
    layui.use(function () {
        //加载获取table模块
        var table = layui.table;
        //加载获取layer弹层模块
        var layer = layui.layer;
        //加载jquery对象
        var $ = layui.jquery;
        var util = layui.util;

        // 渲染表格
        table.render({
            elem: '#adminlist',
            url: '/admin/list', // 数据接口
            page: true, // 开启分页
            limits: [5, 10, 15, 20],
            limit: 5,
            cols: [[
                {field: 'id', title: 'ID', width: 80, sort: true},
                {field: 'username', title: '用户名', width: 150},
                {field: 'phone', title: '手机号', width: 150},
                {field: 'avatar', title: '头像', width: 100, templet: function(d){
                    if(d.avatar){
                        return '<img src="'+d.avatar+'" style="width: 30px; height: 30px; border-radius: 50%;">';
                    }
                    return '无';
                }},
                {field: 'status', title: '状态', width: 100, templet: function(d){
                    return d.status === 1 ? '<span style="color: green;">启用</span>' : '<span style="color: red;">禁用</span>';
                }},
                {field: 'createTime', title: '创建时间', width: 180, templet: function(d){
                    return util.toDateString(d.createTime, 'yyyy-MM-dd HH:mm:ss');
                }},
                {title: '操作',  align: 'center', toolbar: '#rowTools'}
            ]],
            parseData: function(res){ // 将原始数据解析成 table 组件所规定的数据
                return {
                    "code": res.code,
                    "msg": res.msg,
                    "count": res.count,
                    "data": res.data.records
                };
            }
        });

        // 监听工具条
        table.on('tool(adminFilter)', function(obj){
            var data = obj.data; // 获得当前行数据
            var layEvent = obj.event; // 获得 lay-event 对应的值
            
            if(layEvent === 'details'){
                // 查看详情
                showAdminDetails(data);
            } else if(layEvent === 'del'){
                // 删除
                deleteAdmin(data.id, obj);
            } else if(layEvent === 'updateStatus'){
                // 更新状态
                var newStatus = $(this).data('status');
                updateAdminStatus(data.id, newStatus, obj);
            }
        });

        // 显示管理员详情
        function showAdminDetails(admin) {
            $('#username').text(admin.username);
            $('#phone').text(admin.phone || '未填写');
            $('#addtime').text(util.toDateString(admin.createTime, 'yyyy-MM-dd HH:mm:ss'));
            $('#status').html(admin.status === 1 ? '<span style="color: green;">启用</span>' : '<span style="color: red;">禁用</span>');
            
            layer.open({
                type: 1,
                title: '管理员详情',
                content: $('#userInfoDialog'),
                area: ['450px', '350px'],
                shadeClose: true,
                btn: ['关闭'],
                yes: function(index, layero) {
                    layer.close(index);
                }
            });
        }

        // 删除管理员
        function deleteAdmin(id, obj) {
            layer.confirm('确定要删除该管理员吗？', {
                title: '删除确认',
                icon: 3
            }, function(index){
                $.ajax({
                    url: '/admin/delete',
                    type: 'DELETE',
                    data: {id: id},
                    success: function(res) {
                        if(res) {
                            layer.msg('删除成功', {icon: 1});
                            obj.del(); // 删除对应行（tr）的DOM结构
                        } else {
                            layer.msg('删除失败', {icon: 2});
                        }
                    },
                    error: function() {
                        layer.msg('请求失败', {icon: 2});
                    }
                });
                layer.close(index);
            });
        }

        // 更新管理员状态
        function updateAdminStatus(id, status, obj) {
            var statusText = status === 1 ? '启用' : '禁用';
            $.ajax({
                url: '/admin/update',
                type: 'PUT',
                contentType: 'application/json',
                data: JSON.stringify({
                    id: id,
                    status: status
                }),
                success: function(res) {
                    if(res) {
                        layer.msg(statusText + '成功', {icon: 1});
                        // 更新表格行数据
                        obj.update({
                            status: status
                        });
                    } else {
                        layer.msg(statusText + '失败', {icon: 2});
                    }
                },
                error: function() {
                    layer.msg('请求失败', {icon: 2});
                }
            });
        }

        // 添加管理员按钮点击事件
        $('#addAdminBtn').click(function() {
            layer.open({
                type: 2,
                title: '添加管理员',
                content: '/html/admin-add.html',
                area: ['500px', '450px'],
                shadeClose: false,
                btn: ['确定', '取消'],
                yes: function(index, layero) {
                    var iframeWin = window[layero.find('iframe')[0]['name']]; // 获取iframe窗口对象
                    iframeWin.submitForm(function(success) {
                        if(success) {
                            layer.close(index);
                            table.reload('adminlist'); // 重新加载表格
                            layer.msg('添加成功', {icon: 1});
                        } else {
                            layer.msg('添加失败', {icon: 2});
                        }
                    });
                }
            });
        });
    });
</script>

<!--操作栏自定义模板-->
<script id="rowTools" type="text/html">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="details">
            <i class="layui-icon layui-icon-list"></i>
            详情
        </button>
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
            <i class="layui-icon layui-icon-delete"></i>
            删除
        </button>
        {{# if(d.status === 0){ }}
        <button class="layui-btn layui-btn-warm layui-btn-xs" lay-event="updateStatus" data-status="1">
            <i class="layui-icon layui-icon-close-fill"></i>
            禁用
        </button>
        {{# }else{ }}
        <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="updateStatus" data-status="0">
            <i class="layui-icon layui-icon-ok-circle"></i>
            启用
        </button>
        {{# } }}
    </div>
</script>
</body>
</html>